<template>
  <form>
    <h3 class="text-muted my-5">添加新的Pizza</h3>
    <div class="form-group row">
      <label>品种</label>
      <div class="col-sm-11">
        <input type="text" class="form-control" v-model="newPizza.name">
      </div>
    </div>
    <div class="form-group row">
      <label>描述</label>
      <div class="col-sm-11">
        <textarea rows="5" class="form-control" v-model="newPizza.description"></textarea>
      </div>
    </div>
    <p><strong>选项1</strong></p>
    <div class="form-group row">
      <label>尺寸</label>
      <div class="col-sm-11">
        <input type="text" class="form-control" v-model="newPizza.size1">
      </div>
    </div>
     <div class="form-group row">
      <label>价格</label>
      <div class="col-sm-11">
        <input type="text" class="form-control" v-model="newPizza.price1">
      </div>
    </div>

    <p><strong>选项2</strong></p>
    <div class="form-group row">
      <label>尺寸</label>
      <div class="col-sm-11">
        <input type="text" class="form-control" v-model="newPizza.size2">
      </div>
    </div>
     <div class="form-group row">
      <label>价格</label>
      <div class="col-sm-11">
        <input type="text" class="form-control" v-model="newPizza.price2">
      </div>
    </div>
    <div class="form-group row">
      <button type="button" @click="addMenuItem" class="btn btn-success btn-block">添加</button>
    </div>
  </form>
</template>
<script>
  export default{
    data(){
      return{
        newPizza:{}
      }
    },
    methods:{
      addMenuItem(){
      //   // console.log(this.newPizza)
        let data = {
          name:this.newPizza.name,
          description:this.newPizza.description,
          options:[
            {
              size:this.newPizza.size1,
              price:this.newPizza.price1
            },
            {
              size:this.newPizza.size2,
              price:this.newPizza.price2
            }
          ]
        }
        //1.post 请求的第一种方式
                  //使用Fetch发送也很简单，只需要配置三个参数。
                  // 第一个参数是设置请求方法（如post、put或del），Fetch会自动设置方法为get。
                  // 第二个参数是设置头部。因为一般使用JSON数据格式，所以设置ContentType为application/json。
                  // 第三个参数是设置包含JSON内容的主体。因为JSON内容是必须的，所以当设置主体时会调用JSON.stringify。
                  //axios vue-resource es6 fetch
                  // fetch("https://wd9599772701wqqwkt.wilddogio.com/menu.json",{
                  //   method:"POST",
                  //   headers:{
                  //     "Content-type":'application/json'
                  //   },
                  //   body:JSON.stringify(data)
                  // })
                  //   .then(res => res.json())
                  //   .then(data => this.$router.push({name:"menuLink"}))
                  //   .catch(err => console.log(err))
       //2..post 请求的第2种方式
       this.http.post("menu.json",data)
                .then(res => this.$store.commit("pushToMenuItems",data))
                  .then(data => this.$router.push({name:"menuLink"}))
    }
  }
 }
</script>
